<template>
    <div class="room-list">
        <div :class="['room', ['', 'occupy', 'booked'][item.status]]" v-for="item in rooms">
            <p>{{ item.roomNumber }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'

const RoomType = {
    0: '未占用',
    1: '已占用',
    2: '已预约'
}

interface roomsType {
    roomNumber: Number
    status: Number
}

const rooms: Array<roomsType> = reactive([])

/**
 * 计算随机房间号
 */
function generateRooms() {
    const occupiedCount = 5
    const reservedCount = 6

    // 生成所有房间号
    for (let floor = 2; floor <= 12; floor++) {
        for (let room = 1; room <= 4; room++) {
            const roomNumber: any = `${floor}0${room}`
            rooms.push({ roomNumber, status: 0 })
        }
    }

    // 将房间号随机标记为已占用
    for (let i = 0; i < occupiedCount; i++) {
        const index = Math.floor(Math.random() * rooms.length)
        rooms[index].status = 1
    }

    // 将房间号随机标记为已预约
    for (let i = 0; i < reservedCount; i++) {
        const index = Math.floor(Math.random() * rooms.length)
        if (rooms[index].status === 0) {
            rooms[index].status = 2
        } else {
            i-- // 如果选中的房间已被标记，则重复选择
        }
    }
}

onMounted(() => {
    generateRooms()
})
</script>

<style scoped lang="scss">
.room-list {
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0;
    width: 900px;
    color: #ffffff;
    .room {
        text-align: center;
        width: 60px;
        height: 29px;
        line-height: 29px;
        margin-right: 20px;
        margin-bottom: 20px;
        font-size: 14px;
        background: url('./img/room_default.png') no-repeat;
        background-size: 100% 100%;
        font-family: OPPOSans;
        p {
            background: rgba(151, 151, 151, 0.2);
        }
    }
    .occupy {
        background: url('./img/room_occupy.png') no-repeat;
        background-size: 100% 100%;
        p {
            background: rgba(243, 142, 107, 0.3);
        }
    }
    .booked {
        background: url('./img/room_booked.png') no-repeat;
        background-size: 100% 100%;
        p {
            background: rgba(137, 203, 255, 0.3);
        }
    }
}
</style>
